{% extends "base.html" %}
{% block style %}
<style>
#email-input-error {
display: none;
}
.login-box {
   float: right;
   background-color: #ddf;
   min-height: 150px;
   width: 250px;
   border: 2px solid blue;
   text-align: center;
   vertical-align: middle;
   margin: 20px;
   padding: 20px;
   font-size: 20px;
}
#login-email {
  width: 90%
}
</style>
{% endblock %}
{% block script %}
<script>
var emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
$(function() {
  $('.button').button()
  $('#login-form').submit(function() {
    var input = $('#login-email').val();
    if (emailPattern.test(input)) {
      return true;
    } else {
      $('#email-input-error').show();
      return false;
    }
  });
});
</script>
{% endblock %}
{% block title %}
<h1>Welcome to Solar Permitting for {{ main.jurisdiction|e }}</h1>
{% endblock %}

{% block content %}

{% if user %}
{% if not user.role %}
<div class="login-box" id="login-choose-role">
  <p>
    You are logged in as <strong>{{ user.email|e }}</strong>
    but your registration will be complete once you choose a role.
  </p>
  <form>
    <select name="role">
      {% for role in roles %}
      <option value="{{ role }}">{{ role }}</option>
      {% endfor %}
    </select>
    <br/>
    <input type="submit" class="button" value="Continue" />
  </form>
</div>
{% endif %}
{% else %}
<div class="login-box">
  Sign in with your
  <br/>
  <strong>Email Address:</strong>
  <form id="login-form" action="">
    <span id="email-input-error" class="error">
      Invalid email address, please fix.
    </span>
    <input name="email" id="login-email" type="text" />
    <input type="submit" class="button" value="Continue" />
  </form>
</div>
{% endif %}

<div>
  <p>
    Hello and welcome to the City of Light's online solar permitting
    application. This application streamlines the solar permitting
    process by moving to paperless submission and review and
    implementing the
    <a href="http://www.solarabcs.org/about/publications/reports/expedited-permit/index.html">
      standards proposed by the Solar America Board for Codes and
      Standards (Solar ABCs)
    </a>.
  </p>

  <p>
    This is a demo where you can log in as any role to try it out.
    To begin, simply enter any email address and click Continue.
    Then select your role, either:
    <br/>
    <ul>
      <li>
	<i>Applicant</i>
	- The homeowner, installer or integrator who is filing for the permit and conducting the solar installation.
      </li>
      <li>
	<i>Permit Approver</i>
	-  Employee of the authority having jurisdiction (AHJs), or municipalities and counties who must approve the solar installation.
      </li>
    </ul>
  </p>

  <p>
    For help, see the
    <a href="https://sites.google.com/site/solarpermitcentral/">
      Solar Permit Central
    </a>
    site.
  </p>


</div>

{% endblock %}
